import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Tag from '@/components/Tag'
import css from './hot.module.scss'
export default class SearchHot extends PureComponent {
    static propTypes = {
        list: PropTypes.array,
        onSelect: PropTypes.func
    }

    static defaultProps = {
        list: []
    }
    
    handleClick = item => {
        typeof this.props.onSelect === 'function' && this.props.onSelect(item.keyword)
    }

    render() {
        const { list } = this.props
        return (
            <div className={css["wrap"]}>
                <h2 className="title">大家都在搜</h2>
                <div className="list">
                    {
                        list.map(item => {
                            return (
                                <Tag className="tag" key={item.id} onClick={() => this.handleClick(item)}>{item.keyword}</Tag>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}
